<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.musiclist{ width: 280px; height: 110px; background-color: #f1f1f1; border-radius: 6px; }
		.music-leftimg{ width: 80px; height: 80px; border-radius: 100% 100%; overflow: hidden; background-color: #ccc; float: left; margin: 15px 10px; position: relative; }
		.music-leftimg img{ width: 100%; height: 100%; border-radius: 100% 100%; }
		.music-right{ float: right; width: 150px; height: 100%; padding: 0 10px; padding-top: 11px; box-sizing: border-box;}
		.music-right span{ color: #ccc; font-size: 14px; }
		.music-name{  word-break: break-all; text-overflow: ellipsis; display: -webkit-box;  -webkit-box-orient: vertical;  -webkit-line-clamp: 1; overflow: hidden; color: #666; }
		.yuan{ width: 15px; height: 15px; background-color: #fff; position: absolute; top: 50%; left: 50%; margin-left: -7.5px; margin-top: -7.5px; border-radius: 100% 100%; }
		.myclearfix{ clear: both; }
	</style>
</head>
<body>
<div class="musiclist myclearfix">
	<div class="music-leftimg">
		<img src="http://pic.ibaotu.com/00/57/71/83a888piCQEX.jpg-0.jpg!ffc96">
		<div class="yuan"></div>
	</div>
	<div class="music-right">
		<p class="music-name">aasdsd</p>
		<span>.mp3</span>
	</div>
</div>
</body>
</html>